<template>
  <div class="big_div">
    <div id="beforeChange"></div>
    <div id="afterChange"></div>
    <el-button type="primary" class="button_change" @click="changeAttr">查看效果</el-button>
  </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
  name: 'changeNodeAttr',
  data () {
    return {
      currentGraph: null
    }
  },
  mounted () {
    this.initGraph()
  },
  methods: {
    initGraph () {
      let _that = this
      G6.registerNode('diamond', {
        draw (cfg, group) {
          // 如果 cfg 中定义了 style 需要同这里的属性进行融合
          const keyShape = group.addShape('path', {
            attrs: {
              path: this.getPath(cfg), // 根据配置获取路径
              stroke: cfg.color ? cfg.color : 'cyan', // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color
              fill: cfg.fill ? cfg.fill : '#f5f5f5'
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'path-shape',
            // 设置 draggable 以允许响应鼠标的图拽事件
            draggable: true,
          });
          if (cfg.label) {
            // 如果有文本
            // 如果需要复杂的文本配置项，可以通过 labeCfg 传入
            // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
            // style.text = cfg.label;
            const label = group.addShape('text', {
              // attrs: style
              attrs: {
                x: 0, // 居中
                y: 0,
                textAlign: 'center',
                textBaseline: 'middle',
                text: cfg.label,
                fill: '#666',
              },
              // must be assigned in G6 3.3 and later versions. it can be any value you want
              name: 'text-shape',
              // 设置 draggable 以允许响应鼠标的图拽事件
              draggable: true,
            });
          }
          return keyShape;
        },
        // 返回菱形的路径
        getPath (cfg) {
          const size = cfg.size || [140, 140]; // 如果没有 size 时的默认大小
          const width = size[0];
          const height = size[1];
          //  / 1 \
          // 4     2
          //  \ 3 /
          const path = [
            ['M', 0, 0 - height / 2], // 上部顶点
            ['L', width / 2, 0], // 右侧顶点
            ['L', 0, height / 2], // 下部顶点
            ['L', -width / 2, 0], // 左侧顶点
            ['Z'], // 封闭
          ];
          return path;
        },
      }, 'single-node');
      let width = document.getElementById('beforeChange').scrollWidth
      let height = document.getElementById('beforeChange').scrollHeight
      const data = {
        nodes: [
          { id: 'node1', x: 150, y: 100, type: 'diamond' }, // 最简单的
          { id: 'node2', x: 148, y: 400, type: 'diamond', size: [80, 160] }, // 添加宽高
          { id: 'node3', x: 530, y: 130, color: 'red', type: 'diamond' }, // 添加颜色
          { id: 'node4', x: 550, y: 400, label: '菱形', type: 'diamond' }, // 附加文本
        ],
      };
      const graph = new G6.Graph({
        container: 'beforeChange',
        width,
        height,
        modes: {
          default: [
            'drag-canvas',
            'drag-node',
            'zoom-canvas'
          ]
        },
      });
      graph.data(data);
      graph.render();
      _that.currentGraph = graph
    },
    changeAttr () {
      let currentGraphNode = this.currentGraph.save()
      G6.registerNode('diamond_change', {
        draw (cfg, group) {
          // 如果 cfg 中定义了 style 需要同这里的属性进行融合
          const keyShape = group.addShape('path', {
            attrs: {
              path: this.getPath(cfg), // 根据配置获取路径
              stroke: cfg.color ? cfg.color : 'cyan', // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color
              fill: cfg.fill ? cfg.fill : '#f5f5f5'
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'path-shape',
            // 设置 draggable 以允许响应鼠标的图拽事件
            draggable: true,
          });
          if (cfg.label) {
            // 如果有文本
            // 如果需要复杂的文本配置项，可以通过 labeCfg 传入
            // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
            // style.text = cfg.label;
            const label = group.addShape('text', {
              // attrs: style
              attrs: {
                x: 0, // 居中
                y: 0,
                textAlign: 'center',
                textBaseline: 'middle',
                text: cfg.label,
                fill: '#666',
              },
              // must be assigned in G6 3.3 and later versions. it can be any value you want
              name: 'text-shape',
              // 设置 draggable 以允许响应鼠标的图拽事件
              draggable: true,
            });
          }
          return keyShape;
        },
        // 返回菱形的路径
        getPath (cfg) {
          const size = cfg.size || [140, 140]; // 如果没有 size 时的默认大小
          const width = size[0];
          const height = size[1];
          //  / 1 \
          // 4     2
          //  \ 3 /
          const path = [
            ['M', 0, 0 - height / 2], // 上部顶点
            ['L', width / 2, 0], // 右侧顶点
            ['L', 0, height / 2], // 下部顶点
            ['L', -width / 2, 0], // 左侧顶点
            ['Z'], // 封闭
          ];
          return path;
        },
      }, 'single-node');
      let width = document.getElementById('afterChange').scrollWidth
      let height = document.getElementById('afterChange').scrollHeight
      const graph = new G6.Graph({
        container: 'afterChange',
        width,
        height,
        modes: {
          default: [
            'drag-canvas',
            'drag-node',
            'zoom-canvas'
          ]
        },
        defaultNode: {
          type: 'diamond_change'
        },
      });
      currentGraphNode.nodes.forEach(item => {
        item.color = this.getRandomColor()
        item.fill = this.getRandomColor()
        item.label = item.label ? item.label : "" + this.getRandomColor()
      })

      setTimeout(() => {
        graph.data(currentGraphNode);
        graph.render();
      }, 10)
    },
    getRandomColor () {
      var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
      if (rand.length == 6) {
        return '#' + rand;
      } else {
        return this.getRandomColor();
      }
    }
  }
}
</script>

<style  scoped>
.big_div {
  width: 100%;
  height: 60%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
}
#beforeChange,
#afterChange {
  width: 45%;
  border: 1px solid green;
  height: 100%;
}
.button_change {
  position: absolute;
}
</style>